$(() => {
	loadData();
	initListener();
})

initListener = () => {
	$("#load_layout").on('click', () => {
		loadData();
	});
}

loadData = () => {
	setLoadingState(0);
	$("#list").html('');
	setTimeout(() => {
		queryProvinceList(res => {
			if (res.code == 200) {
				handleData(res.data);
			} else {
				setLoadingState(2);
			}
		})
	}, 500)
}

/**
 * 合并城市列表、分组与排序
 */
handleData = (mlist) => {
	let keyInfo = {}
	mlist.forEach(e => {
		let code = 'letter';
		let letter = pinyin.getCamelChars(e.name.substring(0, 1));
		e[code] = letter;
		if (!keyInfo[letter]) {
			keyInfo[letter] = {
				code: letter,
				child: []
			}
		}
		keyInfo[letter].child.push(e)
	})
	let newList = Object.values(keyInfo);
	newList.sort((a, b) => {
		return (a.code + '').localeCompare(b.code + '')
	});
	setList(newList);
}

setList = (mlist) => {
	$(`#list`).html('');
	$(`#side_list`).html('');
	if (ArrayEmpty(mlist)) {
		setLoadingState(2, noData());
	} else {
		setLoadingState(1);
		let itemHtml = ``,
			letterHtml = ``;
		mlist.forEach((e, i) => {
			let letter = e.code;
			let child = e.child;

			letterHtml +=
				`<li ><a href="javascript:;" onclick="onGetLetter('${letter}')">${letter}</a></li>`

			itemHtml += `<div class="sticky_item" id="${letter}">
							<section class="sticky_section" >
								<div class="letter">${letter}</div>
							</section>`;

			child.forEach((citem, j) => {
				let cityList = citem.list;
				let cityListHtml = `<div style="display: none;" id="${citem.id}">
										<div class="city_hot">`;

				cityList.forEach((city, k) => {
					cityListHtml +=
						`<div class="city" onclick="onGetCity('${toObjectStr(city)}')">${city.name}</div>`
				})
				cityListHtml += `</div></div>`;

				itemHtml +=
					`<div class="sticky_list"  
						data-id="${citem.id}" 
						onclick="onGetProvince(this)"> 
						<img src="../../img/ic_right.png" style="margin-right:1rem"/>${citem.name} 
					</div>
					${cityListHtml}`;
			})
			itemHtml += '</div>'
		})
		$(`#list`).html(itemHtml);
		$(`#side_list`).html(letterHtml);
	}
	let letterEle = $('.sidebar');
	let windowHeight = $(window).height();
	let InitHeight = windowHeight - 45;
	let LiHeight = InitHeight / 15;
	letterEle.height(InitHeight);
	letterEle.find('li').height(LiHeight);
	letterEle.find('li').css("line-height", LiHeight + "px");
}

onGetLetter = (s) => {
	$("#showLetter").html(s);
	$("#showLetter").show().delay(1000).hide(0);
	let scrollTo = $(`#${s}`);
	let father = $('.content');
	father.animate({
		scrollTop: scrollTo.offset().top - father.offset().top + father.scrollTop()
	}, 500);
	/**
	 * 以下写法也可以
	 * 这段代码的核心是‌通过 scrollIntoView() 实现“平滑滚动到指定页面区域”‌，结合 id 动态选择和存在性判断，确保交互逻辑的鲁棒性。在实际开发中，可结合导航栏、字母索引等场景，实现丝滑的页面定位体验。
	 */
	// const section = document.getElementById(`${s}`);
	// if (section) {
	//     section.scrollIntoView({ behavior: 'smooth' });
	// }
}

onGetProvince = (e) => {
	let ele = $(e);
	let arrow = ele.find('img');
	let toggleItem = $(`#${e.dataset.id}`);
	if (toggleItem.is(":visible")) {
		$(arrow).css({
			'transform': 'rotate(0deg)'
		});
	} else {
		$(arrow).css({
			'transform': 'rotate(90deg)'
		});
	}
	toggleItem.toggle(500);
}

onGetCity = (e) => {
	window.sessionStorage.setItem('city', e);
	goBack();
}
